<template>
    <view class="custom-tabbar">
        <view class="tab-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(index)">
            <view class="label-cn">{{ item.cn }}</view>
            <view class="label-en">{{ item.en }}</view>
            <view class="underline" v-if="current === index" />
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'

const tabList = [
    {
        pagePath: 'pages/index/index',
        cn: '场馆',
        en: 'Venue'
    },
    {
        pagePath: 'pages/more/more',
        cn: '更多',
        en: 'More'
    },
    {
        pagePath: 'pages/my/my',
        cn: '我的',
        en: 'My'
    }
]

const current = ref(0)

const switchTab = (index) => {
    current.value = index
    Taro.switchTab({
        url: '/' + tabList[index].pagePath
    })
}

useDidShow(() => {
    const pages = Taro.getCurrentPages()
    const currentPage = pages[pages.length - 1]
    const route = currentPage.route
    const i = tabList.findIndex(item => item.pagePath === route)
    current.value = i !== -1 ? i : 0
})
</script>

<style lang="less">
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border-top: 1px solid #eee;
  z-index: 999;

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 12rpx;
    position: relative;

    .label-cn {
      font-size: 32rpx;
      font-weight: 500;
    }

    .label-en {
      font-size: 22rpx;
      color: #999;
      margin-top: 4rpx;
      margin-bottom: 2rpx;
    }

    .underline {
      position: absolute;
      bottom: -2rpx;
      width: 40rpx;
      height: 4rpx;
      background-color: #9a2224;
      border-radius: 2rpx;
    }
  }
}

</style>